<!-- Google tag (gtag.js) --> <script async src="/src/lib/gtag.js"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-VTKNPJ5HVC');
</script>
<meta property="og:title" content="What PWA Can Do Today">
<meta property="og:description" content="A showcase of what is possible with Progressive Web Apps today.">
<meta property="og:image" content="https://whatpwacando.today/src/img/social-logo.png">
<meta property="og:url" content="https://whatpwacando.today">
<meta name="twitter:card" content="summary_large_image">
<meta name="Author" content="Danny Moerkerke">
<!-- optional since iOS 11.3, replaced with display: standalone in manifest, still needed to display startup images -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- replaced by theme-color meta tag since iOS 15 -->
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="theme-color" content="#ffffff">
<!-- Apple splash screen images -->
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2048-2732.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2732-2048.png" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1668-2388.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2388-1668.png" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1536-2048.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2048-1536.png" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1668-2224.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2224-1668.png" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1620-2160.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2160-1620.png" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1290-2796.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2796-1290.png" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1179-2556.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2556-1179.png" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1284-2778.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2778-1284.png" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1170-2532.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2532-1170.png" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1125-2436.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2436-1125.png" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1242-2688.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2688-1242.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-828-1792.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1792-828.png" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1242-2208.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-2208-1242.png" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-750-1334.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1334-750.png" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-640-1136.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-1136-640.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<!-- Apple splash screen images dark mode-->
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2048-2732.png" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2732-2048.png" media="(prefers-color-scheme: dark) and (device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1668-2388.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2388-1668.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1536-2048.png" media="(prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2048-1536.png" media="(prefers-color-scheme: dark) and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1668-2224.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2224-1668.png" media="(prefers-color-scheme: dark) and (device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1620-2160.png" media="(prefers-color-scheme: dark) and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2160-1620.png" media="(prefers-color-scheme: dark) and (device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1290-2796.png" media="(prefers-color-scheme: dark) and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2796-1290.png" media="(prefers-color-scheme: dark) and (device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1179-2556.png" media="(prefers-color-scheme: dark) and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2556-1179.png" media="(prefers-color-scheme: dark) and (device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1284-2778.png" media="(prefers-color-scheme: dark) and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2778-1284.png" media="(prefers-color-scheme: dark) and (device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1170-2532.png" media="(prefers-color-scheme: dark) and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2532-1170.png" media="(prefers-color-scheme: dark) and (device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1125-2436.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2436-1125.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1242-2688.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2688-1242.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-828-1792.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1792-828.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1242-2208.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-2208-1242.png" media="(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-750-1334.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1334-750.png" media="(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-640-1136.png" media="(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="https://whatpwacando.today/src/img/pwa/apple-splash-dark-1136-640.png" media="(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<div class="view home" data-view="/">
<header id="main-header">
<img class="logo" src="/src/img/pwalogo.svg">
</header>
<div class="network-status">
<header>
<i class="material-icons">wifi_off</i>
<p>Your device is currently offline.</p>
</header>
</div>
<div class="content">
<h1>What PWA Can Do Today</h1>
<p>
A showcase of what is possible with Progressive Web Apps today.
</p>
<p>
A Progressive Web App (PWA) is a website that can be installed on your device and provide an app-like experience
<a href="info">read more</a>
</p>
<section id="installation">
<h2>How to use this app</h2>
<p>
This app is itself a Progressive Web App which means it can be installed to the home screen of your
mobile device or to your desktop.
</p>
<p>
After installing you can check the demos of the features below to see what is supported on your device.
</p>
<p>
When the button below becomes enabled, you can install this app.
</p>
<p>
<material-button id="install-button" label="Install to home screen" raised>
<i class="material-icons" slot="left-icon">add_to_home_screen</i>
</material-button>
</p>
</section>
<section id="installed">
<p>
Check the demos of the features below to see what is supported on your device.
</p>
</section>
<h2>Features</h2>
<section class="feature-grid">
<div class="feature">
<a href="/media">
<material-button>
<i class="material-icons" slot="left-icon">videocam</i>
</material-button>
</a>
<aside>
<header>Media capture</header>
<p>Media capture allows web apps to use the camera and microphone of a device</p>
</aside>
</div>
<div class="feature">
<a href="/geolocation">
<material-button>
<i class="material-icons" slot="left-icon">gps_fixed</i>
</material-button>
</a>
<aside>
<header>Geolocation</header>
<p>
The Geolocation API enables users to share their location with web apps .
</p>
</aside>
</div>
<div class="feature">
<a href="/notifications">
<material-button>
<i class="material-icons" slot="left-icon">notifications_none</i>
</material-button>
</a>
<aside>
<header>Notifications</header>
<p>
The Notifications API enables web apps to display notifications, even when the app is not active.
</p>
</aside>
</div>
<div class="feature">
<a href="/view-transitions">
<material-button>
<i class="material-icons" slot="left-icon">auto_awesome_motion</i>
</material-button>
</a>
<aside>
<header>View Transitions</header>
<p>
The View Transitions API enables app-like transitions between pages.
</p>
</aside>
</div>
<div class="feature">
<a href="/file-system">
<material-button>
<i class="material-icons" slot="left-icon">insert_drive_file</i>
</material-button>
</a>
<aside>
<header>File System</header>
<p>
Access to the file system of the user's device
</p>
</aside>
</div>
<div class="feature">
<a href="/authentication">
<material-button>
<i class="material-icons" slot="left-icon">fingerprint</i>
</material-button>
</a>
<aside>
<header>Authentication</header>
<p>
Web Authentication API (WebAuthn) enables passwordless authentication through your device's fingerprint
reader or an external USB Security Key.
</p>
</aside>
</div>
<div class="feature">
<a href="/protocol-handling">
<material-button>
<i class="material-icons" slot="left-icon">language</i>
</material-button>
</a>
<aside>
<header>Protocol Handling</header>
<p>
Protocol handling enables web apps to register their ability to open links with particular URL schemes.
</p>
</aside>
</div>
<div class="feature">
<a href="/file-handling">
<material-button>
<i class="material-icons" slot="left-icon">folder_open</i>
</material-button>
</a>
<aside>
<header>File Handling API</header>
<p>
The File Handling API enables web apps to register as file handlers with the operating system
</p>
</aside>
</div>
<div class="feature">
<a href="/contacts">
<material-button>
<i class="material-icons" slot="left-icon">account_box</i>
</material-button>
</a>
<aside>
<header>Contact picker</header>
<p>
The Contact Picker API allows web apps to select the user's contacts after permission has been granted.
</p>
</aside>
</div>
<div class="feature">
<a href="/web-share">
<material-button>
<i class="material-icons" slot="left-icon">share</i>
</material-button>
</a>
<aside>
<header>Web share</header>
<p>
The Web Share API invokes the native share mechanism of the device and allows users to share
text, URLs or files.
</p>
</aside>
</div>
<div class="feature">
<a href="/barcode">
<material-button>
<i class="material-icons" slot="left-icon">qr_code_scanner</i>
</material-button>
</a>
<aside>
<header>Barcode detection</header>
<p>
The Barcode Detection API detects barcodes and qr-codes in images.
</p>
</aside>
</div>
<div class="feature">
<a href="/face-detection">
<material-button>
<i class="material-icons" slot="left-icon">face</i>
</material-button>
</a>
<aside>
<header>Face detection</header>
<p>
The Shape Detection API detects faces in images.
</p>
</aside>
</div>
<div class="feature">
<a href="/vibration">
<material-button>
<i class="material-icons" slot="left-icon">vibration</i>
</material-button>
</a>
<aside>
<header>Vibration</header>
<p>
The Vibration API enables web apps to make a mobile device vibrate.
</p>
</aside>
</div>
<div class="feature">
<a href="/audio-recording">
<material-button>
<i class="material-icons" slot="left-icon">mic</i>
</material-button>
</a>
<aside>
<header>Audio recording</header>
<p>
Record audio using MediaRecorder and visualize audio using Web Audio API.
</p>
</aside>
</div>
<div class="feature">
<a href="/audio">
<material-button>
<i class="material-icons" slot="left-icon">play_circle_filled</i>
</material-button>
</a>
<aside>
<header>Audio</header>
<p>
The Media Session API allows web apps to display controls for media playback on a device's lock screen.
</p>
</aside>
</div>
<div class="feature">
<a href="/audiosession">
<material-button>
<i class="material-icons" slot="left-icon">tune</i>
</material-button>
</a>
<aside>
<header>Audio Session API</header>
<p>
The Audio Session API configures how audio from web apps should mix with audio from native apps.
</p>
</aside>
</div>
<div class="feature">
<a href="/capture-handle">
<material-button>
<i class="material-icons" slot="left-icon">screen_share</i>
</material-button>
</a>
<aside>
<header>Capture Handle</header>
<p>
Capture Handle enables screen capturing web apps to reliably communicate with captured web apps.
</p>
</aside>
</div>
<div class="feature">
<a href="/background-sync">
<material-button>
<i class="material-icons" slot="left-icon">sync</i>
</material-button>
</a>
<aside>
<header>Background Sync API</header>
<p>
The Background Sync API enables web apps to defer tasks when it's offline so they can be run when the network
connection is restored.
</p>
</aside>
</div>
<div class="feature">
<a href="/background-fetch">
<material-button>
<i class="material-icons" slot="left-icon">downloading</i>
</material-button>
</a>
<aside>
<header>Background Fetch API</header>
<p>
The Background Fetch API enables web apps to download large files in the background even when the app is not
running.
</p>
</aside>
</div>
<div class="feature">
<a href="/storage">
<material-button>
<i class="material-icons" slot="left-icon">inventory</i>
</material-button>
</a>
<aside>
<header>Storage API</header>
<p>
The Storage API enables web apps to persist structured data in the user's browser.
</p>
</aside>
</div>
<div class="feature">
<a href="/bluetooth">
<material-button>
<i class="material-icons" slot="left-icon">bluetooth</i>
</material-button>
</a>
<aside>
<header>Bluetooth</header>
<p>
The Web Bluetooth API enables web apps to connect to Bluetooth Low Energy (BLE) devices and read values from or
write values to it.
</p>
</aside>
</div>
<div class="feature">
<a href="/nfc">
<material-button>
<i class="material-icons" slot="left-icon">nfc</i>
</material-button>
</a>
<aside>
<header>NFC</header>
<p>
The Web NFC API enables web apps to read and write to NFC tags.
</p>
</aside>
</div>
<div class="feature">
<a href="/ar-vr">
<material-button>
<i class="material-icons" slot="left-icon">layers</i>
</material-button>
</a>
<aside>
<header>AR/VR</header>
<p>
Augmented reality enables web apps to place virtual objects in reality.
</p>
</aside>
</div>
<div class="feature">
<a href="/payment">
<material-button>
<i class="material-icons" slot="left-icon">credit_card</i>
</material-button>
</a>
<aside>
<header>Payment</header>
<p>
The Payment Request API provides a browser-based method to enable users to make payments on the web, using a credit
card, Apple Pay or Google Pay.
</p>
</aside>
</div>
<div class="feature">
<a href="/wake-lock">
<material-button>
<i class="material-icons" slot="left-icon">screen_lock_portrait</i>
</material-button>
</a>
<aside>
<header>Wake lock</header>
<p>
The Screen Wake Lock API enables web apps to prevent devices from dimming or locking the screen when the app
needs to keep running.
</p>
</aside>
</div>
<div class="feature">
<a href="/device-orientation">
<material-button>
<i class="material-icons" slot="left-icon">screen_rotation</i>
</material-button>
</a>
<aside>
<header>Orientation</header>
<p>
The DeviceOrientationEvent gives information about the physical orientation of the user's device.
</p>
</aside>
</div>
<div class="feature">
<a href="/device-motion">
<material-button>
<i class="material-icons" slot="left-icon">3d_rotation</i>
</material-button>
</a>
<aside>
<header>Motion</header>
<p>
The DeviceMotionEvent gives information about the speed of changes for the position and orientation of
the user's device.
</p>
</aside>
</div>
<div class="feature">
<a href="/network-info">
<material-button>
<i class="material-icons" slot="left-icon">network_check</i>
</material-button>
</a>
<aside>
<header>Network info</header>
<p>
The NetworkInformation API provides information about the connection of a device, allowing web apps to adapt
functionality based on network quality.
</p>
</aside>
</div>
<div class="feature">
<a href="/speech-synthesis">
<material-button>
<i class="material-icons" slot="left-icon">record_voice_over</i>
</material-button>
</a>
<aside>
<header>Speech synthesis</header>
<p>
Speech synthesis provides text-to-speech and allows programs to read out their text content.
</p>
</aside>
</div>
<div class="feature">
<a href="/speech-recognition">
<material-button>
<i class="material-icons" slot="left-icon">hearing</i>
</material-button>
</a>
<aside>
<header>Speech recogniton</header>
<p>
Speech recognition is part of the Web Speech API and provides the ability to recognize voice context from an
audio input.
</p>
</aside>
</div>
<dialog id="install-dialog">
<section>
<header>
<img src="/src/img/pwalogo.webp">
<div class="heading">
<span>What PWA Can Do Today</span>
<span>A showcase of what is possible with Progressive Web Apps today</span>
</div>
<div class="close">
<button type="button" id="close-install-dialog">
<img src="/src/img/install/close.svg">
</button>
</div>
</header>
closeButton.addEventListener('click', e => {
installDialog.removeAttribute('opened');
// fix for < iOS 17.2, when the install dialog is shown and closed the user can no longer scroll the page
// by removing overflow:hidden from the main content and reapplying it with a short delay this is fixed
const mainContent = document.querySelector('#main-content');
mainContent.style.overflow = 'auto';
setTimeout(() => {
mainContent.style.overflow = 'hidden';
}, 100);
});